<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>

<!-- web路径问题 
	不以/开始的相对路径，找资源，是以当前资源的路径为基准，经常容易出问题
	所以要定位一个绝对路径，从当前项目开始找，
	以服务器的路径为标准（http://localhost:3306），需要加上项目名
	http://localhost:3306/crud
-->
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${APP_PATH }/static/js/jquery-1.4.2.min.js"></script>
<!-- 引入Bootstrap样式 -->
<link rel="stylesheet"
	href="${APP_PATH }/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script
	src="${APP_PATH }/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 搭建显示界面 -->
	<div class="contoiner">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<!-- 向右偏移四个列宽度 -->
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover">
					<tr>
						<th>#</th>
						<th>EmpName</th>
						<th>Gender</th>
						<th>Email</th>
						<th>DeptName</th>
						<th>操作</th>
					</tr>

					<c:forEach items="${pageinfo.list }" var="emp">
						<tr>
							<th>${emp.empId }</th>
							<th>${emp.empName }</th>
							<th>${emp.gender=="M"?"男":"女" }</th>
							<th>${emp.email }</th>
							<th>${emp.department.deptName }</th>
							<th>
								<button class="btn btn-success btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
									编辑
								</button>
								<button class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
									删除
								</button>
							</th>
						</tr>
					</c:forEach>

				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6">当前第${pageinfo.pageNum }页，总${pageinfo.pages }页，总共${pageinfo.total }条记录
			</div>
			<!-- 分页条信息 -->
			<div class="col-md-6">
				<nav aria-label="Page navigation">
				<ul class="pagination">
					<li><a href="${APP_PATH }/emps?pn=1">首页</a></li>
					<!-- 如果存在上一页，才能显示上一页按钮 -->
					<c:if test="${pageinfo.hasPreviousPage }">
						<li><a href="${APP_PATH }/emps?pn=${pageinfo.pageNum-1 }"
							aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
						</a></li>
					</c:if>

					<!-- 得到当前的页码，循环输出页码 -->
					<c:forEach items="${pageinfo.navigatepageNums }" var="page_Num">
						<c:if test="${page_Num == pageinfo.pageNum }">
							<li class="active"><a href="#">${page_Num }</a></li>
						</c:if>
						<c:if test="${page_Num != pageinfo.pageNum }">
							<li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
						</c:if>
					</c:forEach>

					<!-- 判断有没有下一页 -->
					<c:if test="${pageinfo.hasNextPage }">
						<li><a href="${APP_PATH }/emps?pn=${pageinfo.pageNum+1 }"
							aria-label="Next"> <span aria-hidden="true">&raquo;</span>
						</a></li>
					</c:if>
					<li><a href="${APP_PATH }/emps?pn=${pageinfo.pages }">末页</a></li>
				</ul>
				</nav>
			</div>
		</div>
	</div>
</body>
</html>